<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-13 20:02:13
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-17 23:21:16
 * @FilePath: \vue3_admin_template\project\src\components\PublicMap\MapAggregation.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 聚合图 -->
  <el-menu-item index="2" @click="getData" style="margin: 0 0 0 20px">
    聚合图
  </el-menu-item>
</template>

<script setup lang="ts">
// import $ from 'jquery'; // 即使是全局引入，也可以这样导入类型
import mapboxGl from 'mapbox-gl'
import { onMounted } from 'vue'
import useMapStore from '@/store/modules/map'

// import globelJsson from'@/components/PublicMap/aggregation/globel.json'
let map: any = null
let globelJsson: any = null
onMounted(() => {
  map = useMapStore().map
  map.on('style.load', () => {
    // initLayer()
  })
})
const getData = () => {
  $.ajax({
    url: '/public/aggregation/globel.json',
    method: 'get',
  }).then((res: any) => {
    globelJsson = res
    initLayer()
  })
}
const initLayer = () => {
  //添加数据源
  map.addSource('cluster_source', {
    type: 'geojson',
    data: globelJsson,
    //设置聚合
    cluster: true,
  })
  //添加图层
  map.addLayer({
    id: 'cluster_layer',
    type: 'circle',
    source: 'cluster_source',
    filter: ['has', 'point_count'],
    //设置动态样式
    paint: {
      //颜色
      'circle-color': {
        property: 'point_count',
        stops: [
          [50, 'red'],
          [200, 'green'],
          [500, 'skyblue'],
          [1000, 'yellow'],
          [1500, '#652e80'],
        ],
      },
      //半径
      'circle-radius': {
        property: 'point_count',
        stops: [
          [50, 15],
          [200, 20],
          [500, 50],
          [1000, 60],
          [1500, 40],
        ],
      },
    },
  })
  //添加标注图层
  map.addLayer({
    id: 'text-field',
    source: 'cluster_source',
    type: 'symbol',
    layout: {
      'text-field': ['get', 'point_count'],
    },
    glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
    filter: ['has', 'point_count'],
  }),
    //设置没有point_count 属性值的图层 filter:['!','has','point_count'],
    map.addLayer({
      id: 'no-point_count',
      source: 'cluster_source',
      type: 'circle',
      paint: {
        'circle-radius': 10,
        'circle-color': '#11b4da',
        'circle-stroke-width': 4,
        'circle-stroke-color': '#652e80',
      },
      filter: ['!', ['has', 'point_count']],
    })
  map.on('click', 'cluster_layer', (evt: any) => {
    let features = map.queryRenderedFeatures(evt.point, {
      layer: ['cluster_layer'],
    })
    //获取点击的聚合要素
    const feature = features[0]
    //获取聚合要素的point_count 数据
    let { point_count } = feature.properties
    //获取经纬度坐标
    let { coordinates } = feature.geometry
    //声明popup
    new mapboxGl.Popup()
      .setLngLat(coordinates)
      .setText(`要素数量${point_count}`)
      .addTo(map)
  })
}
</script>

<style lang="scss" scoped></style>
